<template>
  <div class="flex-contain flex-column card-component-container">
    <div class="flex-contain pad20">
      <div
        class="flex-none default-round flex-contain flex-column flex-justify-content-center text-align-center question-status"
        :class="{
          'orange-background': (data.quesList || []).length > 0,
          'blue-background': (data.quesList || []).length === 0
        }"
      >
        {{ (data.quesList || []).length > 0 ? '问题' : '正常' }}
      </div>
      <div class="flex-contain flex-column font-size-14 pad20" style="width: 100%;">
        <div class="marBottom20 font-bold font-size-16">
          {{ data.data.houseNo }}
        </div>
        <div class="flex-contain flex-justify-content-space-between">
          <div>对象名称：{{ data.data.objName }}</div>
          <div>常住人口数：{{ data.data.permanentPopulation }}</div>
        </div>
        <div>地址：{{ data.data.longitude }},{{ data.data.latitude }}</div>
      </div>
    </div>
    <div class="default-horizontal-line background-F2F2F2" />
    <div class="flex-contain width100 link flex-justify-content-space-between">
      <div class="pad15 width100 text-align-center cursor" @click="edit">
        编辑
      </div>
      <div class="default-vertical-line background-F2F2F2 flex-none" />
      <div class="pad15 width100 text-align-center cursor" @click="goToDetail">
        详情
      </div>
      <div class="pad15 width100 text-align-center cursor">
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete()">
          <a>删除</a>
        </a-popconfirm>
      </div>
    </div>
  </div>
</template>

<script>
import { houseDeleted } from '@/api/House'
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    edit() {
      this.$emit('edit', this.data)
    },
    goToDetail() {
      console.log(this.data)
      this.$emit('goToDetail', this.data)
    },
    async handleDelete() {
      try {
        await houseDeleted({ id: this.data.id })
        this.$emit('reloadHouseList')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
.card-component-container {
  border-color: rgb(233, 233, 233);
  border-width: 1px;
  border-style: solid;
  box-shadow: rgb(0 0 0 / 14%) 0px 1px 3px 0px;
  border-radius: 3px;
}
.question-status {
  width: 50px;
  height: 50px;
  color: white;
  margin-right: 20px;
}
</style>
